<template>
    <div class="persondata">
        <div class="head">
            <div class="head_left"><van-icon name="arrow-left" @click="back" /></div>
            <div class="head_mid">
                <div class="head-box">个人资料</div>
            </div>
            <div class="head_right"></div>
        </div>

        <div class="person-content">
            <div class="img">
                <img :src="person.user_avator" alt="" />
            </div>
            <div class="data">
                <div class="item">
                    <div class="item-left">姓名</div>
                    <div class="item-right">
                        <input type="text" v-model.trim="person.user_nick_name" />
                    </div>
                </div>
                <div class="item">
                    <div class="item-left">性别</div>
                    <div class="item-right">
                        <input maxlength="1" type="text" v-model.trim="person.user_sex" />
                    </div>
                </div>
                <div class="item">
                    <div class="item-left">地址</div>
                    <div class="item-right">
                        <input type="text" v-model.trim="person.user_addr" />
                    </div>
                </div>
                <div class="item">
                    <div class="item-left">E-mail</div>
                    <div class="item-right">
                        <input type="text" v-model.trim="person.user_acc" />
                    </div>
                </div>
            </div>
            <div class="save"><button @click="save">更新资料</button></div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { getUserPerson, modifyUserPerson } from "../../request/index.js";
import { showToast } from "vant";
let router = useRouter();
let user_id = localStorage.getItem("user_id");
let person = ref({});
let personname = ref("");

getUserPerson({ user_id }).then((res) => {
    person.value = res.data[0];
    // console.log(person, 999);
});

let back = () => {
    router.go(-1);
};
let save = () => {
    // if (person.value.user_sex != "男" || person.value.user_sex != "女") {
    //     console.log(person.value.user_sex);
    //     person.value.user_sex = "";
    //     alert("性别只能为男或女");
    // } else {
    console.log(person.value.user_nick_name, person.value.user_sex, person.value.user_addr, person.value.user_acc);
    modifyUserPerson({ user_id, user_nick_name: person.value.user_nick_name, user_sex: person.value.user_sex, user_addr: person.value.user_addr, user_acc: person.value.user_acc }).then((res) => {
        showToast(res.msg);
    });
    // }
};
</script>

<style lang="scss" scoped>
.persondata {
    .head {
        color: #666666;
        box-shadow: 0 0 5px 1px #e5e5e5;
        height: 3.125rem;
        display: flex;
        .head_left {
            font-size: 1.25rem;
            width: 6.25rem;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .head_mid {
            font-size: 1.0625rem;
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
        }
        .head_right {
            width: 6.25rem;
        }
    }
    .person-content {
        box-sizing: border-box;
        padding: 0.625rem 1.25rem;
        .img {
            width: 100%;
            margin-top: 1.25rem;
            display: flex;
            justify-content: center;
            img {
                border-radius: 50%;
                background-color: skyblue;
                width: 6.25rem;
                height: 6.25rem;
            }
        }
        .data {
            margin-top: 2.5rem;
            .item {
                width: 100%;
                height: 3.75rem;
                display: flex;
                border-bottom: 1px solid #efefef;
            }
            .item-left {
                box-sizing: border-box;
                padding: 0 1.25rem;
                flex: 1;
                display: flex;
                align-items: center;
            }
            .item-right {
                box-sizing: border-box;
                padding: 0 1.25rem;
                flex: 1;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                font-size: 0.875rem;
                input {
                    text-align: center;
                }
            }
        }
        .save {
            display: flex;
            justify-content: center;
            margin-top: 1.875rem;
            button {
                padding: 0.9375rem 3.75rem;
                border-radius: 1rem;
                font-size: 0.875rem;
                color: white;
                background-color: #fe7174;
            }
        }
    }
}
</style>
